<template>
	<view class="infopage" v-if="showList">
		<view class="banner">
			<swiper indicator-dots="true" indicator-color="rgba(255,255,255,1)" indicator-active-color="#E41805" autoplay="true"
			 interval="3000">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image lazy-load="true" :src="host+item" mode="aspectFill" @click="$imgPreview(item, index, host, bannerList)"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 门店描述 -->
		<view class="shopdes">
			<view class="top" v-if="coupon.length > 0">
				<text class="activity">满{{coupon[0].full_quota}}减{{coupon[0].reduce_quota}}元</text>
				<text class="getquan" @click="getquanlist">领券 <text class="iconfontPT iconxiayibu xiayibu"></text></text>
			</view>
			<view class="content">
				<view class="contetntLeft">
					{{shopMsg.title}}
				</view>
				<view class="contentRight">
					<view class="xj">
						<view class="xjbox"> 
							<!-- <image :src="'/static/images/xing.png'" mode="widthFix" v-for="(i,idx) in 5" :key='idx'></image> -->
							<Star :score="shopMsg.xj" />
							<!-- iconshoucang-weixuanzhong -->
						</view>
					</view>
					<view class="price">
						￥{{shopMsg.uniformity}}/人
					</view>
				</view>

			</view>
			<view class="fwln">
				{{shopMsg.purpose?shopMsg.purpose:''}}
			</view>
			<view class="bottom">
				<view class="bottomleft" @click="handleLocation(shopMsg.address, shopMsg.latitude, shopMsg.longitude)">
					<text class="location_icon iconfontPT icondingwei" style="display: inline-block;"></text>{{shopMsg.address}}
					<text class="location_number">距您约{{(Number(shopMsg.distance ) / 1000).toFixed(2)}}Km</text>
				</view>
				<view class="phone" @click="phone(shopMsg.phone)">
					<text class="phone_icon iconfontPT icondianhua" catchtap="initGetDataFn"></text>
					<text class="phone_txt">一键拨号</text>
				</view>
				<!-- </map> -->
			</view>
		</view>

		<!-- 推荐菜品 -->
		<view class="tjshop">
			<view class="title">
				<text>推荐商品</text>
				<view class="nextes" @click="allgoods" >全部商品 <text class="iconfontPT iconxiayibu xiayibu"></text></view>
			</view>
			<view class="goodsListBox">
				<view class="goodsItem" v-for="(item,index) in goods" :key="index" @click="bug(item)">
					<image :src="`${qiniuhost}${item.img}-t.m60xx`" mode="aspectFill"></image>
					<view class="goodsmsg">
						<view class="title">{{item.title}}</view>
						<view class="zekou">
							<text>{{item.zekou}}折</text>
						</view>
						<view class="price">
							<text class="price-currency">￥</text> {{item.plat_price}} <text class="price-number">￥{{item.price}}</text>
						</view>
					</view>

					<view class="buy">
						<view class="buyButton">抢购</view>
						<text>已售{{item.sale}}单</text>
					</view>
				</view>
			</view>
			<view class="more-shop">
				<view class="nextes" @click="allgoods" >查看全部商品 <text class="iconfontPT iconxiayibu xiayibu"></text></view>
			</view>
		</view>

		<!-- 门店员工 -->
		<view class="staff">
			<view class="title">
				<text>门店员工</text>
				<view class="nextes" @click="allStaff">全部员工 <text class="iconfontPT iconxiayibu xiayibu"></text></view>
			</view>
			<view class="staffMain">
				<view class="staffBox">
					<view class="staffItem" v-for="(item,index) in staffList" :key="index" @click="staffInfo(item)">
						<image :src="item.portrait==null || item.portrait==''?'/static/images/head.png' :`${host}${item.portrait}`"
						 mode="aspectFill"></image>
						<view class="staffInfo">
							<view class="name">
								{{item.name}}
							</view>
							<text class="position">
								{{item.position}}
							</text>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="tjshop">
			<view class="title">
				<text>用户评价({{pjlist.length}})</text>
			</view>
			<!-- TODO: 还原设计稿 -->
			<!-- <view class="evaluate">
				<view class="evaluate-navbar">
					<view class="evaluate-navbar__item evaluate-navbar__item--active">全部 </view>
					<view class="evaluate-navbar__item">好评 </view>
					<view class="evaluate-navbar__item">中评 </view>
					<view class="evaluate-navbar__item">差评 </view>
				</view>
				<view class="evaluate-content">
					<swiper>
						<swiper-item>
							<view class="pjBox">
								<view class="pjItem" v-for="(item, index) in filterEvaluateList" :key="index">
									<view class="pjUser">
										<image :src="item.portrait"></image>
										<view class="usermsg">
											<view class="left">
												<view class="name">{{item.name}}</view>
												<view class="comment-wrapper">
													<text class="pj__txt">评分</text>
													<view class="xj">
														<view class="xjbox">
															<text :class="[`iconfontPT star ${ item1 < item.score ? 'iconshoucang-yixuanzhong' : 'iconshoucang-weixuanzhong' }`]"
															 v-for="item1 in 5" :key="item1"></text>
														</view>
													</view>
												</view>
											</view>
											<view class="right">
												{{item.time}}
											</view>
										</view>
							
										<view class="pjinfo">
											<view class="msg">
												{{item.content}}
											</view>
											<view class="imgBox">
												<view class="imgItem imgBox__singleImage" v-if="item.img.length === 1">
													<image :src="`${qiniuhost}${item.img[0]}-t.m75xx`" mode="aspectFill" @click="$imgPreview(item.img[0], idx, qiniuhost, item.img)"></image>
												</view>
												<view class="imgItem imgBox__multImage" v-else-if="item.img.length > 1" v-for="(i,idx) in item.img" :key="idx">
													<image :src="`${qiniuhost}${i}-t.m75xx`" mode="aspectFill" @click="$imgPreview(i, idx, qiniuhost, item.img)"></image>
												</view>
											</view>
										</view>
							
										<view class="business-comment" v-if="item.hf_status === 1">
											<text class="business-comment__icon iconfontPT iconshangjiahuiying"></text>
											<text class="business-comment__txt"><text class="business-comment__txt--reply">商家回复:</text>{{item.hf_content}}</text>
										</view>
									</view>
								</view>
								<noData v-if="!filterEvaluateList.length" texts="暂无评价"/>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view> -->
			<Tabs :TabList="tabList" :currentTab="checkedTab" @tabs="tabsChange" :lineWidth="'173'">
				<TabPane v-for="(tab, index) in tabList" :key="index">
					<view class="pjBox">
						<view class="pjItem" v-for="(item, index) in filterEvaluateList" :key="index">
							<view class="pjUser">
								<image :src="item.portrait"></image>
								<view class="usermsg">
									<view class="left">
										<view class="name">{{item.name}}</view>
										<view class="comment-wrapper">
											<text class="pj__txt">评分</text>
											<view class="xj">
												<view class="xjbox">
													<text :class="[`iconfontPT star ${ item1 < item.score ? 'iconshoucang-yixuanzhong' : 'iconshoucang-weixuanzhong' }`]"
													 v-for="item1 in 5" :key="item1"></text>
													<!-- <Star :score="`${ item.score === null ? 5 : item.score }`"  /> -->
												</view>
											</view>
										</view>
									</view>
									<view class="right">
										{{item.time}}
									</view>
								</view>

								<view class="pjinfo">
									<view class="msg">
										{{item.content}}
									</view>
									<view class="imgBox">
										<view class="imgItem imgBox__singleImage" v-if="item.img.length === 1">
											<image :src="`${qiniuhost}${item.img[0]}-t.m75xx`" mode="aspectFill" @click="$imgPreview(item.img[0], idx, qiniuhost, item.img)"></image>
										</view>
										<view class="imgItem imgBox__multImage" v-else-if="item.img.length > 1" v-for="(i,idx) in item.img" :key="idx">
											<image :src="`${qiniuhost}${i}-t.m75xx`" mode="aspectFill" @click="$imgPreview(i, idx, qiniuhost, item.img)"></image>
										</view>
									</view>
								</view>

								<view class="business-comment" v-if="item.hf_status === 1">
									<text class="business-comment__icon iconfontPT iconshangjiahuiying"></text>
									<text class="business-comment__txt"><text class="business-comment__txt--reply">商家回复:</text>{{item.hf_content}}</text>
								</view>
							</view>
						</view>
						<noData v-if="!filterEvaluateList.length" texts="暂无评价"/>
					</view>
				</TabPane>
			</Tabs>
			<view class="allpj" @click="gotoallpj">
				<text>查看全部用户评价</text>
				<text class="iconfontPT iconxiayibu xiayibu"></text>
			</view>
		</view>
		<view class="dialogBox" v-if="dialogstatus">
			<view class="mask w100 h100" @click="getquanlist"></view>
			<view class="dialog">
				<view class="title">优惠券</view>
				<view class="quanbox">
					<view class="quanitem" v-for="(item,index) in quanList" :key="index">
						<view class="quanleft">
							<view class="name">
								满{{item.full_quota}}减{{item.reduce_quota}}元
							</view>
							<view class="form">
								店铺优惠券
							</view>
							<view class="time">
								{{item.begin_time}} - {{item.expire_time}}
							</view>
						</view>
						<view class="quanright">
							<text :class="item.state == 0?'get':'get hasget'" @click="getQuan(item)">{{item.state == 0?'立即领取':'已领取'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixedBox">
			<!-- 		<text class="iconfontPT iconshoucang" v-if="shopMsg.sc_state == 0" @click="collection"></text>
			<text class="iconfontPT iconshoucang-yixuanzhong1 yishoucang" v-if="shopMsg.sc_state == 1" style="font-size: 36rpx;"
			 @click="del_collection"></text> -->
			<text :class="[`iconfontPT ${ !shopMsg.sc_state ? 'iconshoucang' : 'iconshoucang-yixuanzhong1 yishoucang'}`]" @click="handleSetCollection(shopMsg)"></text>
			<text class="iconfontPT icontousu" @click="gotots"></text>
		</view>
	</view>
</template>

<script>
	import Tabs from '../components/public/tabs.vue'
	import TabPane from '../components/public/tabPane.vue'

	import {
		info,
		coupon,
		getcoupon,

		getcouponShop,
		collection,
		del_collection
	} from "../../apis/shop/api.js"
	import Star from '../components/public/star.vue'

	export default {
		data() {
			return {
				params: { // 请求参数
					store_id: "", // 门店id
					latitude: "", //经纬度
					longitude: "",
				},
				bannerList: [], // banner列表
				staffList: [], // 门店员工列表
				goods: [], // 商品列表
				shopMsg: {},
				quanList: [],
				sc_id: '',
				dialogstatus: false,
				showList: false,
				checkedTab: 0,
				tabList: [{
						title: '全部',
						state: 5
					},
					{
						title: '好评',
						state: 4
					},
					{
						title: '中评',
						state: 3
					},
					{
						title: '差评',
						state: 2
					}
				],
				evaluateList: [],
				filterEvaluateList: [],
				pjlist: [],
				pjactive: 0,
				coupon: []
			}
		},
		onLoad(option) {
			this.params = { ...option };
			this.params.latitude =this.params.latitude?this.params.latitude:uni.getStorageSync('location').latitude;
			this.params.longitude=this.params.longitude?this.params.longitude:uni.getStorageSync('location').longitude;
			uni.showLoading({
				title: '加载中...',
				mark: true,
			})
			this.getInfoData();
		},
		computed: {
			host() {
				return this.$baseHost.car
			},
			qiniuhost() {
				return this.$baseHost.qiniuHost
			}
		},
		components: {
			Star,
			Tabs,
			TabPane,
		},
		methods: {
			handleSetCollection(data) {
				this.$loading.show()
				if (this.shopMsg.sc_state) {
					del_collection({
						id: data.sc_id
					}).then(res => {
						this.$loading.hide()
					})
				} else {
					const params = {
						collection_id: data.id,
						type: 5
					}

					collection(params).then(res => {
						this.shopMsg.sc_id = res.data
						this.$loading.hide()
					})
				}
				this.shopMsg.sc_state = !this.shopMsg.sc_state
			},
			morepj(val, index) {
				this.pjactive = index
				this.pjlist = this.pjlist2.filter(i => i.score == val)
				console.log(this.pjlist)
			},
			tabsChange(index) {
				this.checkedTab = index;

				this.getFilterEvaluateList(index);
			},
			handleLocation(address, latitude, longitude) {
				let params = {
					latitude: parseFloat(latitude),
					longitude: parseFloat(longitude),
					name: '',
					address
				}
				uni.openLocation(params)
			},
			getquanlist() {
				this.dialogstatus = !this.dialogstatus;
				coupon({
					store_id: this.params.store_id
				}).then(res => {
					this.quanList = res.data
				})
			},
			phone(phone) {
				if(!uni.getStorageSync('openId')){
					uni.navigateTo({url:'/pages/authorize'})
					return false
				}
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			getQuan(item) {
				if (item.state == 0) {
					let that = this
					getcouponShop({
						id: item.id,
						store_id: this.params.store_id
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '领取成功',
							});
							that.getquanlist()
						} else {
							uni.showToast({
								title: '领取失败',
							});
						}
					})
				}

			},
			gotoallpj() {
				uni.navigateTo({
					url: "/pages/shop/allpj?store_id=" + this.params.store_id
				})
			},
			gotots() {
				uni.navigateTo({
					url: "/pages/shop/tousu?store_id=" + this.params.store_id
				})
			},
			getInfoData() {
				info(this.params).then(res => {
					this.bannerList = res.data.store.img;
					this.goods = res.data.goods;
					this.staffList = res.data.staff;
					this.coupon = res.data.coupon
					this.staffList.forEach(item => {
						item.portrait = item.portrait.split(",");
					})
					this.goods.forEach(item => {
						item.zekou = (Number(item.plat_price) / Number(item.price) * 10).toFixed(2)
					})
					res.data.store.xj && (res.data.store.xj = res.data.store.xj.toFixed(1))

					this.shopMsg = res.data.store;
					this.pjlist = res.data.evaluate;
					this.evaluateList = this.pjlist;
					this.filterEvaluateList = this.pjlist;

					this.showList = true;
					uni.hideLoading();
					uni.setStorageSync("shopMsg", this.shopMsg);

				})
			},
			getFilterEvaluateList(index) {
				let filterFunc = item => item;

				switch (index) {
					case 0:
						break;
					case 1:
						filterFunc = item => Number(item.score) > 4 && Number(item.score) <= 5;
						break;
					case 2:
						filterFunc = item => Number(item.score) >= 3 && Number(item.score) <= 4;
						break;
					case 3:
						filterFunc = item => Number(item.score) >= 0 && Number(item.score) < 3;
						break;
				}

				this.filterEvaluateList = this.evaluateList.filter(filterFunc);
			},
			bug(item) {
				if(!uni.getStorageSync('openId')){
					uni.navigateTo({url:'/pages/authorize'})
					return false
				}
				uni.navigateTo({
					url: "/pages/shop/goodsinfo?store_id=" + this.params.store_id + '&id=' + item.id + "&phone=" + this.shopMsg.phone
				})
			},
			allStaff() {
				uni.navigateTo({
					url: "/pages/shop/allStaff?store_id=" + this.params.store_id
				})
			},
			staffInfo(item) {
				uni.navigateTo({
					url: "/pages/shop/staffInfo?store_id=" + this.params.store_id + '&id=' + item.id
				})
			},
			allgoods() {
				if(!uni.getStorageSync('openId')){
					uni.navigateTo({url:'/pages/authorize'})
					return false
				}
				uni.navigateTo({
					url: "/pages/shop/goodsList?store_id=" + this.params.store_id + "&phone=" + this.shopMsg.phone
				})
			}
		}
	}
</script>

<style lang="less">
	.evaluate-navbar{
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		&__item{
			width: 160rpx;
			height: 54rpx;
			background-color: #F5F5F5;
			border-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			&--active{
				border: 1px solid #E41805;
				color: #E41805;
				background-color: #FFFFFF;
			}
		}
	}
	.xiayibu {
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.iconshoucang-yixuanzhong {
		color: #FCD100;
	}

	.dialogBox {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		z-index: 3;

		.mask {
			z-index: 1;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #fff;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.dialog {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 980rpx;
			background-color: #fff;
			z-index: 2;

			.title {
				text-align: center;
				color: #E41805;
				line-height: 88rpx;
				font-weight: bold;
			}

			.quanbox {
				box-sizing: border-box;
				width: 100%;
				padding: 0 30rpx 30rpx 30rpx;

				.quanitem {
					background-color: #fff3f5;
					color: #676767;
					margin-top: 20rpx;
					padding: 20rpx 18rpx;

					&::after {
						content: "";
						display: block;
						height: 0;
						overflow: hidden;
						clear: both;
					}

					.quanleft {
						width: calc(~"100% - 230rpx");
						float: left;
						padding-left: 15rpx;

						.name {
							font-size: 26rpx;
							color: #E41805;
						}

						.form {
							font-size: 24rpx;
							color: #666;
							margin: 15rpx 0;
						}

						.time {
							font-size: 24rpx;
							color: #676767;
						}
					}

					.quanright {
						width: 210rpx;
						float: right;
						padding: 54rpx 0;

						.get {
							display: block;
							width: 152rpx;
							height: 54rpx;
							background: linear-gradient(90deg, rgba(228, 24, 5, 1) 0%, rgba(253, 109, 95, 1) 100%);
							color: #fff;
							margin: 0 auto;
							text-align: center;
							font-size: 24rpx;
							border-radius: 27rpx;
							line-height: 54rpx;

							&.hasget {
								background: linear-gradient(90deg, rgba(153, 153, 153, 1) 0%, rgba(204, 204, 204, 1) 100%);
							}
						}
					}
				}
			}
		}
	}

	.xj {
		width: 100%;

		&::after {
			content: "";
			display: block;
			height: 0;
			overflow: hidden;
			clear: both;
		}

		.xjbox {
			float: left;
			margin-right: 15rpx;
			display: flex;
			position: relative;

			&::after {
				content: "";
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			image {
				width: 24rpx;
				height: 24rpx;
				float: left;
				margin-right: 5rpx;

			}
		}

		text {
			float: right;
			font-size: 24rpx;
			color: #666;

			&.star {
				float: unset;
				font-size: 24rpx;
				color: #FCD100;
				flex: 1;
				margin-right: 8rpx;
			}
		}
	}

	.infopage {

		background-color: #f8f8f8;
	}

	.tjshop {
		padding: 50rpx 0;

		.tabs {
			height: unset;
		}

		.goodsItem {
			margin-top: 30rpx;
			padding: 30rpx;
			box-shadow: 0rpx 4rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);

			&::after {
				content: "";
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			image {
				width: 144rpx;
				height: 144rpx;
				float: left;
				margin-right: 30rpx;
			}

			.goodsmsg {
				float: left;

				.title {
					font-size: 30rpx;
					font-weight: 500;
					color: #333;
				}

				.price {
					font-size: 30rpx;
					color: #E41805;
					margin-top: 18rpx;

					text {
						font-size: 24rpx;
						color: #999999;
						text-decoration: line-through;
						margin-left: 10rpx;
					}

					.price-currency {
						font-size: 18rpx;
						font-weight: bold;
						color: #E41805;
						text-decoration: unset;
						margin-left: 0;
					}

					.price-number {
						font-size: 18rpx;
					}
				}

			}

			.buy {
				float: right;
				margin-top: 20rpx;

				.buyButton {
					width: 100rpx;
					height: 50rpx;
					border-radius: 25rpx;
					background-color: #E41805;
					color: #fff;
					font-size: 24rpx;
					text-align: center;
					line-height: 50rpx;
				}

				text {
					font-size: 24rpx;
					color: #999;
				}
			}

		}

		.more-shop {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 10rpx 0;
			font-size: 26rpx;
			margin-top: 30rpx;
			color: #E41805;

			.xiayibu {
				font-size: 20rpx;
				position: relative;
				top: -2rpx;
				color: #E41805;
			}
		}
	}

	.staff,
	.tjshop,
	.banner,
	.pjBox {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 40rpx 30rpx;
	}

	.banner {
		margin-top: 0;

		image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}

	.staffMain {
		width: 100%;
		overflow: auto;


		.staffBox {
			width: 840rpx;

			&::after {
				content: "";
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			.staffItem {
				width: 220rpx;
				height: 70rpx;
				padding: 20rpx;
				margin-right: 20rpx;
				margin-top: 35rpx;
				float: left;
				border-radius: 55rpx;
				background-color: #f8f8f8;
                
				image {
					width: 70rpx;
					height: 70rpx;
					border-radius: 70rpx;
					float: left;
					margin-right: 20rpx;
				}

				.staffInfo {
					float: left;
					line-height: 1.2;

					.name {
						font-size: 26rpx;
						color: #1a1a1a;
					}

					.position {
						border: 1rpx solid #E41805;
						color: #E41805;
						padding: 0 15rpx;
						font-size: 20rpx;
						border-radius: 8rpx;
					}
				}
			}
		}

	}

	.pjlev {
		display: flex;
		text-align: center;
		line-height: 68rpx;
		padding: 15rpx 0;

		.item {
			flex: 1;
			cursor: pointer;

			&.active {
				border: 1rpx solid #E41805;
				color: #E41805;
				border-radius: 10rpx;
			}
		}
	}

	.pjBox {
		padding: 40rpx 0;

		.pjItem {
			.pjUser {
				margin-bottom: 30rpx;

				&::after {
					content: "";
					display: block;
					height: 0;
					overflow: hidden;
					clear: both;
				}

				&>image {
					width: 70rpx;
					height: 70rpx;
					border-radius: 35rpx;
					float: left;
				}

				.usermsg {
					padding-left: 20rpx;
					width: calc(~"100% - 90rpx");
					float: left;

					.comment-wrapper {
						margin-top: 14rpx;
					}

					&::after {
						content: "";
						display: block;
						height: 0;
						overflow: hidden;
						clear: both;
					}

					.left {
						float: left;
						width: calc(~"100% - 160rpx");

						&::after {
							content: "";
							display: block;
							height: 0;
							overflow: hidden;
							clear: both;
						}

						.name {
							font-size: 26rpx;
							color: #333333;
						}

						&>view {
							&::after {
								content: "";
								display: block;
								height: 0;
								overflow: hidden;
								clear: both;
							}

							.pj__txt {
								font-size: 24rpx;
								float: left;
								color: #999;
							}

							.xj {
								// float: left;
								// width: calc(~"100% - 60rpx");
							}
						}

					}

					.right {
						float: right;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.pjinfo {
					padding-left: 84rpx;

					.msg {
						font-size: 28rpx;
						color: #333333;
						font-size: 500;
					}

					.imgBox {
						display: flex;
						margin-top: 20rpx;

						&__singleImage {
							width: 340rpx;
							height: 360rpx;

							>image {
								width: 100%;
								height: 100%;
							}
						}

						&__multImage {
							width: 194rpx;
							height: 194rpx;

							margin-right: 10rpx;

							&:last-child {
								margin-right: 0;
							}

							>image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}
	}

	.allpj {
		font-size: 26rpx;
		color: #E41805;
		text-align: center;
		border-top: 1rpx solid #eee;
		padding-top: 30rpx;

		.xiayibu {
			color: #E41805;
		}
	}

	.title {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;

		.nextes {
			color: #808080;
			font-size: 24rpx;
			float: right;
			padding: 10rpx 0rpx 10rpx 20rpx;
		}
	}

	.shopdes {
		background-color: #fff;
		padding: 0 30rpx 40rpx;

		.top {
			.activity {
				background-color: #FFE8E6;
				color: #E41805;
				font-size: 24rpx;
				padding: 12rpx 20rpx;
				border-radius: 5rpx;
			}

			.getquan {
				float: right;
				font-size: 24rpx;
				color: #808080;
				line-height: 60rpx;
			}
		}

		.content {
			margin-top: 50rpx;

			&::after {
				content: "";
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			.contetntLeft {
				font-size: 36rpx;
				color: #333;
				float: left;
				font-weight: bold;
			}

			.contentRight {
				float: right;
				width: 320rpx;
				display: flex;
				align-items: center;
				.xj {
					float: left;
					max-width: 215rpx;
				}

				.price {
					float: right;
					border-left: 1rpx solid #999;
					padding-left: 10rpx;
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.fwln {
			color: #E41805;
			font-size: 30rpx;
			line-height: 48rpx;
			border-bottom: 1px solid #eee;
			padding: 20rpx 0;
			font-weight: 500;
		}

		.bottom {
			padding-top: 30rpx;

			&::after {
				content: "";
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			.bottomleft {
				float: left;
				color: #333333;
				font-size: 30rpx;
				position: relative;
				padding-left: 36rpx;
				font-weight: bold;

				text {
					display: block;
					font-size: 24rpx;
					color: #333;
				}

				.location_icon {
					position: absolute;
					left: 0;
					top: 8rpx;
				}

				.location_number {
					color: #999;
					font-size: 24rpx;
					margin-top: 15rpx;
					font-weight: normal;
				}
			}

			.phone {
				float: right;
				border-left: 1px solid #eee;
				height: 85rpx;
				padding-left: 30rpx;

				.phone_icon {
					color: #FF7A22;
					font-size: 44rpx;
					display: block;
					text-align: center;
				}

				.phone_txt {
					color: #999;
					font-weight: 500;
					font-size: 24rpx;
				}
			}
		}

	}

	.fixedBox {
		position: fixed;
		right: 0;
		top: 50%;

		text {
			font-size: 40rpx;
			text-align: center;
			line-height: 72rpx;
			display: block;
			width: 72rpx;
			height: 72rpx;
			color: #fff;
			margin: 40rpx 20rpx;
			border-radius: 72rpx;
			background-color: rgba(0, 0, 0, 0.3);

			&.yishoucang {
				font-size: 36rpx;
				color: #E41805;
			}
		}
	}

	.zekou {
		text {
			font-size: 22rpx;
			background-color: #FFE8E6;
			color: #E41805;
			padding: 3rpx 6rpx;
		}

	}

	.business-comment {
		border-top: 1px solid rgba(204, 204, 204, 0.5);
		padding: 10rpx 0 30rpx;
		margin-left: 84rpx;
		margin-top: 30rpx;
		font-size: 26rpx;


		&__icon {
			color: #FAAB20;
			margin-right: 20rpx;
			font-size: 25rpx;
		}

		&__txt {
			color: #333;
			font-size: 26rpx;

			&--reply {
				color: #999;
				margin-right: 10rpx;
			}
		}
	}
</style>
